<template>
  <div class="content w-full h-full flex flex-col items-center bg-#F5F7F8 overflow-y-auto relative">
    <Banner />
    <HotGame :list="listData" />
    <Recommend />
    <GameList v-for="game in listData" :key="game.id" :data="game" />
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { getAllGame } from '@/api/game'
import HotGame from './components/hot-game.vue'
import Banner from './components/banner.vue'
// import Recommend from './components/recommend.vue'
import Recommend from './components/recommend-list.vue'
import GameList from './components/game-list.vue'
const listData = ref([])
onMounted(() => {
  getAllGame().then((res) => {
    listData.value = res
  })
})
</script>

<style></style>
